<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
        }

        ul {
            width: 1680px;
            height: 300px;

            position: relative;
        }

        li {
            width: 276px;
            height: 300px;
            display: inline-block;
            position: relative;

        }

        .imgs {
            width: 276px;
            height: 200px;
            position: absolute;
            top: 0px;
        }

        .imgss {
            width: 100px;
            height: 100px;
        }

        h3 {
            position: absolute;
            top: 200px;
        }

        h4 {
            position: absolute;
            top: 200px;
            left: 160px;
        }

        td {
            text-align: center;
        }
    </style>
</head>

<body>
    <ul>

    </ul>

    <table border="1px">
        <thead>
            <tr>
                <td style="width: 150px;">全选<input type="checkbox" class="all"><button class="fan">反选</button></td>
                <td style="width: 100px;">id</td>
                <td style="width: 100px;">商品名称</td>
                <td style="width: 100px;">价格</td>
                <td style="width: 100px;">图片</td>
                <td style="width: 100px;">数量</td>
                <td style="width: 100px;">小计</td>
                <td style="width: 200px;">操作</td>
            </tr>
        </thead>

        <tbody>

        </tbody>
    </table>
    <script>
        var date = [{
            id: 0,
            name: '手机',
            price: '4500',
            img: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/272519/16/6712/113168/67dbe8adFc719bf51/f94aea3d61c756fb.jpg'
        }, {
            id: 1,
            name: '跳绳',
            price: 22,
            img: 'https://img14.360buyimg.com/n1/jfs/t1/216588/39/38365/57386/665fc29cF5e2d3968/a59a58e8307dad7b.jpg.avif'
        }, {
            id: 2,
            name: '空调',
            price: 2499,
            img: 'https://img13.360buyimg.com/n1/jfs/t1/276175/18/3244/63600/67d4458fFb9668327/bb0b076aaa6b7e36.jpg.avif'
        }, {
            id: 3,
            name: '电视机',
            price: 3250,
            img: 'https://img11.360buyimg.com/n1/jfs/t1/273779/5/3205/87541/67d40e4aFfd9cb862/c9a39359c7ae2c79.jpg.avif'
        }, {
            id: 4,
            name: '洗衣机',
            price: 10069,
            img: 'https://img11.360buyimg.com/n1/jfs/t1/282237/4/5355/108707/67daa1aaFd2129bc0/06004c4742cd40ab.jpg.avif'
        }, {
            id: 5,
            name: '鼠标',
            price: 199,
            img: 'https://img13.360buyimg.com/n1/jfs/t1/48673/36/20788/32431/64715cdbF7750e72e/2b4af7232aa1276a.jpg.avif'
        },]

        var arr = []
        var tbody = document.querySelector('tbody')
        var ul = document.querySelector('ul')
        function apply() {
            date.forEach(item => {
                ul.innerHTML += `
            <li>
            <img src="${item.img}" alt="" class="imgs">
            <h3>商品名称:${item.name}</h3>
            <h4>价格:${item.price}</h4>
        </li>
           `
            })

        }
        apply()

        function arrs() {
            tbody.innerHTML = ''
            arr.forEach(item => {

                tbody.innerHTML += `
          <tr>
                 <td><input type = "checkbox" class="ins"></td>
                 <td>${item.id}</td>
                 <td>${item.name}</td>
                 <td>${item.price}</td>
                  
                 <td> <img src="${item.img}" class="imgss"></td>
                <td></td>
                <td></td>
                 <td>
                   <button onclick = 'del(${item.id})'>删除</button>
                    </td>
              </tr > `

            })
        }
        arrs()

        var lii = document.querySelectorAll('li')
        lii.forEach((item, index) => {

            item.addEventListener('click', () => {

                date.forEach(it => {
                    if (index == it.id) {
                        arr.push({
                            id: arr.length + 1,
                            name: it.name,
                            price: it.price,
                            img: it.img,
                        })
                    }
                })
                arrs()

            })
        })


        function del(iid) {
            var index = arr.findIndex(item => item.id == iid)
            arr.splice(index, 1)
            arrs()

        }


        var all = document.querySelector('.all')

        all.addEventListener('click', () => {
            var ins = document.querySelectorAll('tbody input')
            ins.forEach(item => {
                item.checked = all.checked
            })

        })
        var fan = document.querySelector('.fan')
        fan.addEventListener("click", () => {
            var ins = document.querySelectorAll('tbody input')
            ins.forEach(item1 => item1.checked = !item1.checked)
        })

    </script>

</body>

</html>